<template>
  <el-dialog :title="dialogTitle" :visible="addDialogIsShow" @close="btnCancel">
  <el-form label-width="80px" :model="formData" ref="articleForm" :rules="rules">
    <el-form-item label="文章标题" prop="title">
      <el-input v-model="formData.title"></el-input>
    </el-form-item>
    <el-form-item label="文章内容" prop="articleBody">
    <quill-editor
                class="editor"
                v-model.trim="formData.articleBody"
                :options="editorOption"
                @blur="articleBodyBlur"
                style="margin-bottom: 45px; height: 200px"
              >
    </quill-editor>
    </el-form-item>
     <el-form-item label="视频地址" prop="videoURL" >
      <el-input v-model="formData.videoURL"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="btnCancel">取 消</el-button>
    <el-button type="primary" @click="btnOk">确 定</el-button>
  </div>
</el-dialog>
</template>

<script>
// import editor from '@/components/QuillEditor'
import { add, update } from '@/api/hmmm/articles.js'
export default {
  components: {
    // editor
  },
  props: {
    addDialogIsShow: {
      type: Boolean,
      default: false,
      require: true
    },
    dialogTitle: {
      type: String,
      default: '',
      require: true

    },
    formData: {
      type: Object,
      require: true,
      default () {
        return {
          title: '',
          articleBody: '',
          videoURL: ''
        }
      }
    },
    params: {
      type: Object,
      required: true
    }

  },
  data () {
    return {
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link', 'image', 'video']
          ]
        },
        placeholder: '',
        theme: 'snow'
      },
      editorRef: 'test',
      editorContent: '',
      rules: {
        title: [{ required: true, message: '文章标题不能为空', trigger: 'blur' }
        ],
        articleBody: [{ required: true, message: '文章内容不能为空' }
        ]
      }
    }
  },
  watch: {
    'formData.articleBody': {
      handler (newValue) {
        this.editorContent = newValue
      },
      deep: true
    }
  },
  methods: {
    async  btnOk () {
      try {
        this.formData.articleBody = this.editorContent// 把编辑器中的数据赋值给formData
        await this.$refs.articleForm.validate()
        if (this.formData.id) {
          await update(this.formData)
        } else {
          await add(this.formData)
        }
        await this.$emit('getArticleList')
        this.params.page = 1
        this.$emit('update:addDialogIsShow', false)
        // this.$parent.formData = {
        //   name: '', // 名称
        //   code: '', // 标识
        //   description: '', // 描述
        //   type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        //   pid: ''
        // }
        // this.$refs.perForm.resetFields()

        this.$message.success(this.formData.id ? '编辑成功' : '添加成功')
      } catch (error) {
        console.log(error)
      }
      // add(this.formData)
    },
    btnCancel () {
      this.$emit('update:formData', {
        title: '',
        articleBody: '',
        videoURL: ''
      })
      this.$refs.articleForm.resetFields()
      this.$emit('update:addDialogIsShow', false)
    },
    articleBodyBlur () {
      this.$refs.articleForm.validateField('articleBody')
    }
  }
}
</script>

<style scoped></style>
